<template>
  <div class="wrapper">
    <div class="address">
      <!--头部-->
      <MyHeader>
          请选择收货地址
      </MyHeader>
      <div class="city_search">
        <div class="search">
          <span class="city">
            北京
            <i class="iconfont iconicon"></i>
          </span>
          <i class="iconfont iconxingtaiduICON_sousuo--"></i>
          <input type="text" v-model="keyword" placeholder="请输入地址" @input="search" />
        </div>

        <div>
          <div class="title">当前定位</div>
          <div class="des">
            <i class="iconfont icondaohang"></i>
            <span>{{$store.state.position.formattedAddress}}</span>
          </div>
        </div>
      </div>
      <div class="area">
        <ul
          class="area_list"
          v-for="item in tips"
          :key="item.id"
          @click="$store.commit('changeAddress',item.name+item.address); $router.history.push('/')"
        >
          <li>
            <h4>{{item.district}}</h4>
            <p>{{item.name+item.address}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {},
  data() {
    return {
      keyword: "",
      tips: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    search() {
      const _this = this;
      AMap.plugin("AMap.Autocomplete", function() {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: "北京"
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(_this.keyword, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result.tips);
          _this.tips = result.tips || [];
        });
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.address {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 45px;
}

.city_search {
  background-color: #fff;
  padding: 10px 20px;
  color: #333;
}

.search {
  background-color: #eee;
  height: 40px;
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 40px;
}
.search .city {
  padding: 0 10px;
}
.city i {
  margin-right: 10px;
}
.search input {
  margin-left: 5px;
  background-color: #eee;
  outline: none;
  border: none;
}

.area {
  margin-top: 16px;
  background: #fff;
}
.area li {
  border-bottom: 1px solid #eee;
  padding: 8px 16px;
  color: #aaa;
}
.area li h4 {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.title {
  margin: 10px 0;
  font-size: 12px;
}
.des i {
  color: #009eef;
}
.des span {
  color: #333;
  font-weight: bold;
  margin-left: 5px;
  display: inline-block;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>